<template>
    <div>
        <div>
            <ui-form v-model="searchForm" label-width="100px" class="query-form">
                <ui-form-item label="消息类型">
                    <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerName"> </ui-input>
                </ui-form-item>

                <ui-form-item label="消息名称">
                    <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerNo"> </ui-input>
                </ui-form-item>
                <ui-form-item label="提醒时间">
                    <div style="display: flex;width: 500px;">
                        <ui-date-picker v-model="searchForm.startDate" type="date" placeholder="请选择起始时间">
                        </ui-date-picker>
                        <span style=" width: 30px;padding: 0px 10px;">——</span>
                        <ui-date-picker v-model="searchForm.endDate" type="date" placeholder="请选择结束时间" @change="checkdate">
                        </ui-date-picker>
                    </div>
                </ui-form-item>
            </ui-form>
        </div>
        <div>
            <div style="text-align: center;margin-bottom: 50px;margin-top: 20px;">
                <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
                <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
            </div>
        </div>
        <div>
            <vx-table :tableData="tableData" :isSelect="false" :columns="columns">
                <template #action="{ scope }">
                    <div style="color: red;cursor: pointer;">查看详情</div>
                </template>
            </vx-table>
        </div>

        <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout"
            :page-sizes="pageSizeList" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </ui-pagination>

    </div>
</template>
<script>
import pagination from '@/common/mixin/pagination.js'; // 混入分页
import vxTable from '@/components/vx-table-slot';

export default {
    name: 'MessageReminder',
    mixins: [pagination],
    components: {
        vxTable,
    },
    data() {
        return {
            searchForm: {
                customerName: '',
                customerNo: '',
                startDate: '',
                endDate: ''
            },
            layout: "total, sizes, prev, pager, next, jumper", // 分页顺序
            columns: [
                {
                    prop: 'userName',
                    label: '序号',
                    type:"index",
                    width: '100px',
                    fixed: true,
                },
                {
                    prop: 'userName',
                    label: '消息名称',
                },
                {
                    prop: 'userName',
                    label: '消息内容',
                },
                {
                    prop: 'userName',
                    label: '提醒时间',
                },
                {
                    label: '操作',
                    prop: 'slot',
                    slots: { name: 'action' },
                    width: '200',
                    fixed: 'right',
                },

            ],
            tableData: [
                {}
            ],
        }
    },
    methods: {
        reset(){
            console.log()
        },
        checkdate() {
            console.log("11");
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .ui-input__prefix {
    display: none;
}
</style>